<template>
<section class="upload-info-type-table">
    <section class="top-line">
        <el-button
            v-if="type === 1 && !isCheckStatus"
            @click="batchCheck"
            icon="el-icon-edit"
            type="primary"
            size="small">
            批量核对
        </el-button>
        <!-- <el-button
            v-if="type === 1 && !isCheckStatus"
            @click="isCheckStatus = true"
            icon="el-icon-edit"
            type="primary"
            size="small">
            批量输入销项
        </el-button> -->
        <template v-if="isCheckStatus">
            <el-button
                @click="checkBilles"
                type="primary"
                size="small"
                id="checkBillesBtn">
                确认
            </el-button>
            <el-button
                @click="isCheckStatus = false"
                type="primary"
                size="small"
                plain>
                返回
            </el-button>
        </template>

        <div class="search-section">
            <el-input
                placeholder="请输入公司名称进行查询"
                v-model="companyName"
                @keyup.enter.native="search"
                @clear="search"
                size="mini"
                suffix-icon="el-icon-search"
                clearable>
            </el-input>
            <el-select
                v-model="status"
                @blur="search"
                @clear="search"
                clearable
                multiple
                collapse-tags
                size="mini"
                placeholder="请选择状态">
                <el-option
                    v-for="item in accountStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>
    </section>
    <el-table
        ref="multipleTable"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
            v-if="isCheckStatus"
            width="70">
            <template slot="header" slot-scope="scope">
                <el-checkbox
                    v-model="checkedAll"
                    @change="checkedAllChange"
                    :indeterminate="isIndeterminate"
                    class="checked-all">
                    全选
                </el-checkbox>
            </template>
            <template slot-scope="scope">
                <el-checkbox
                    v-model="scope.row.checked"
                    :disabled="scope.row.disabled"
                    @change="checkedChange">
                </el-checkbox>
            </template>
        </el-table-column>
        <el-table-column
            prop="serialNumber"
            label="编号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="companyName"
            label="公司名"
            min-width="150">
        </el-table-column>
        <el-table-column
            prop="industry"
            label="所属行业"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="accountingManager"
            label="会计负责人"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="mobile"
            label="手机号"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="payTaxesType"
            label="账号类型"
            min-width="100">
            <template slot-scope="scope">
            {{payTaxesTypeList[scope.row.payTaxesType]}}
            </template>
        </el-table-column>
        <el-table-column
            prop="weChartAccount"
            label="微信号"
            min-width="100">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            min-width="100">
            <template slot-scope="scope">
            {{getStatusText(scope.row.status)}}
            </template>
        </el-table-column>
        <el-table-column
            label="操作"
            min-width="250">
            <template slot-scope="scope">
                <template v-if="scope.row.status === 1">
                    <el-button
                        type="primary"
                        icon="el-icon-upload"
                        size="mini"
                        @click="toDetail(scope.row, 'upload-info-page')">
                        上传资料
                    </el-button>
                    <!-- <el-button
                        v-if="scope.row.payTaxesType === 1"
                        type="primary"
                        icon="el-icon-coordinate"
                        size="mini">
                        零账簿处理
                    </el-button> -->
                </template>
                <el-button
                    v-if="scope.row.status === 1"
                    type="primary"
                    icon="el-icon-view"
                    size="mini"
                    @click="noDeclare(scope.row)">
                    零申报
                </el-button>
                <el-button
                    v-if="scope.row.status === 2"
                    type="primary"
                    icon="el-icon-view"
                    size="mini"
                    @click="toDetail(scope.row, 'edit-info-page')">
                    编辑资料
                </el-button>
                <el-button
                    v-if="scope.row.status === 2 || scope.row.status === 10"
                    type="success"
                    icon="el-icon-tickets"
                    size="mini"
                    @click="weChatPressToDo(scope.row)">
                    微信催办
                </el-button>
                <el-button
                    v-if="scope.row.status === 3 || scope.row.status === 5 || scope.row.status === 6"
                    type="warning"
                    icon="el-icon-s-claim"
                    size="mini"
                    @click="focusAccountBills(scope.row)">
                    强制做账
                </el-button>
                <el-button
                    v-if="scope.row.status === 5"
                    type="primary"
                    icon="el-icon-view"
                    size="mini"
                    @click="toDetail(scope.row, 'view-detail-page')">
                    查看详情
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        @current-change="currentPageChange"
        class="pagination">
    </el-pagination>
</section>
</template>

<script>
import map from '@/components/map';
import tableDataHelper from './tableDataHelper';
import utiles from '@/components/utiles';

export default {
    props: {
        type: {
            type: Number,
            default: 0
        }
    },
    components: {
    },
    data() {
        let accountStatusList;
        // 信息上传
        if (this.type === 0) {
            accountStatusList = map.accountStatusList.slice(0, 3);
        }
        // 信息核对
        else {
            accountStatusList = map.accountStatusList.slice(3, 7);
        }
        return {
            companyName: '',
            status: [],
            total: 0,
            currentPage: 1,
            pageSize: 20,
            tableData: [],
            isCheckStatus: false,
            checkedAll: false,
            isIndeterminate: false,
            accountStatusList,
            payTaxesTypeList: map.payTaxesTypeList,

            timmerId: null
        };
    },
    mounted() {
        this.currentPageChange(1);
        this.setTimeoutLoadData();
    },
    destroyed() {
        const taskListDataInput = document.getElementById('taskListDataInput');
        if (taskListDataInput) {
            document.body.removeChild(taskListDataInput);
        }

        if (this.timmerId) {
            window.clearTimeout(this.timmerId);
        }
    },
    methods: {

        /**
         * 翻页触发
         *
         * @param {Number} pageNumber 页码
         */
        currentPageChange(pageNumber) {
            let status = [];
            if (this.status.length === 0) {
                this.accountStatusList.forEach(item => {
                    status.push(item.value);
                });
            }
            else {
                status = this.status;
            }
            // 获取搜索条件
            const queryData = {
                companyName: this.companyName,
                status,
                // 精度类型
                accuracyType: 0,
                pageSize: this.pageSize,
                pageNumber
            };

            this.$http.post('/accountBills/getCompanies', queryData).then(res => {
                tableDataHelper.preProcessData(res.data.list, this.type);
                this.total = res.data.total;
                this.tableData = res.data.list;
            });
        },

        /**
         * 将状态编码转为文字
         *
         * @param {Number} status 状态码
         */
        getStatusText(status) {
            let result = '';
            map.accountStatusList.some(item => {
                if (item.value === status) {
                    result = item.label;
                    return true;
                }
            });
            return result;
        },

        /**
         * 搜索
         */
        search() {
            // this.pageNumber = 1;
            this.currentPageChange(1);
        },

        /**
         * 定时请求列表数据
         */
        setTimeoutLoadData() {
            this.timmerId = window.setTimeout(() => {
                this.currentPageChange(this.currentPage);
                this.setTimeoutLoadData();
            }, 2000);
        },

        /**
         * 发起批量核对状态
         */
        checkBilles() {
            const checkedItems = tableDataHelper.getCheckedItems(this);
            if (checkedItems.length === 0) {
                this.$message({
                    message: '请至少选择一条',
                    type: 'warning'
                });
                return;
            }

            this.$confirm(
                '批量核对任务将会在后台执行，如需查看最新状态请手动刷新页面',
                '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // const loading =
                // this.$loading({
                //     customClass: 'checking-bill',
                //     lock: true,
                //     text: '核对中，请稍等... 进度请在插件中查看，请勿关闭税务局网站',
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(0, 0, 0, 0.7)'
                // });
                this.postCheckedItems(checkedItems);
                // this.chromeExtension(checkedItems);
            });
        },

        /**
         * 向后台推送 核对 或 销项
         */
        postCheckedItems(checkedItems) {
            const currentUser = utiles.getCurrentUser();
            const result = [];
            checkedItems.forEach(item => {
                result.push({companyName: item.companyName});
            });
            this.$http.post('/accountBills/pushJobs', {
                type: 1,
                bName: currentUser.bCompanyName,
                list: result
            });
        },

        /**
         * 与 chrome 的通信
         */
        chromeExtension(checkedItems) {
            const currentUser = utiles.getCurrentUser();
            const result = {
                regionType: 'sichuan',
                bName: currentUser.bCompanyName,
                taskList: []
            };
            checkedItems.forEach(item => {

                result.taskList.push({
                    regionType: 'sichuan',
                    bName: currentUser.bCompanyName,
                    taskType: '批量核对',
                    // 公司名
                    companyName: item.companyName,
                    // 信用代码
                    creditCode: item.businessLicenseNumber,
                    // 登录密码
                    password: 'yx123456', // item.password
                    mobile: item.mobile,
                    payTaxesType: item.payTaxesType
                });
            });
            let taskListDataInput = document.getElementById('taskListDataInput');

            if (taskListDataInput === null) {
                taskListDataInput = document.createElement('input');
                taskListDataInput.id = 'taskListDataInput';
                taskListDataInput.style.display = 'none';
                document.body.appendChild(taskListDataInput);
            }

            taskListDataInput.value = JSON.stringify(result);
        },

        /**
         * 选项改变
         */
        checkedChange() {
            tableDataHelper.checkedChange(this);
        },

        /**
         * 全选/全不选 处理
         */
        checkedAllChange(val) {
            tableDataHelper.checkedAllChange(this, val);
        },

        /**
         * 到上传详情页
         */
        toDetail(data, path) {
            const str = JSON.stringify(data);
            localStorage.setItem('currentAccountBill', str);
            this.$router.push(`/upload-info/${path}`);
        },

        noDeclare(data){
            const currentUser = utiles.getCurrentUser();
            this.$http.post("/accountBills/zeroDeclare", {
                bName: currentUser.bCompanyName,
                companyName: data.companyName
            })
        },

        /**
         * 强制做账
         */
        focusAccountBills(data) {
            this.$confirm('是否确认强制做账?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.postFocusAccountBillsRequest(data);
            });
        },

        /**
         * 发送强制做账请求
         */
        postFocusAccountBillsRequest(data) {
            this.$http.post('/accountBills/forceBill', {
                companyName: data.companyName,
                financeStatus: data.status
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '强制做账成功!'
                });
                this.currentPageChange(this.currentPage);
            });
        },

        /**
         * 微信催办
         */
        weChatPressToDo(data) {
            this.$http.get('/accountBills/wxPush', {
                params: {
                    companyName: data.companyName,
                    phoneNum: data.mobile,
                    financeStatus: data.status
                }
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '催办成功!'
                });
            });
        },

        /**
         * 批量 核对 或 输入销项
         */
        batchCheck() {
            this.isCheckStatus = true;

            // 重新搜索 / 批量核对
            if (this.type === 0) {
                this.companyName = '';
                this.status = [3, 5];
                this.search();
            }
            // 批量输入销项
            else {
                // 暂无逻辑
            }
        }
    }
}
</script>

<style lang="less" scoped>
.upload-info-type-table {
    padding: 0 10px;
    .top-line {
        padding-bottom: 10px;

        .search-section {
            float: right;
            width: 420px;
            text-align: right;
            .el-input,
            .el-select {
                margin-top: 2px;
                display: inline-block;
                width: 200px;
            }
        }
    }
    .pagination {
        text-align: right;
        padding: 20px 0 0;
    }
    .checking-bill {
        font-size: 50px;
    }
}
</style>
<style lang="less">
.checking-bill .el-icon-loading {
    font-size: 50px;
}
.checked-all .el-checkbox__label {
    font-size: 12px;
    font-weight: 400;
    color: #909399;
}
</style>
